<!-- 实验二的热力图 -->
<template>
    <div id="chartHeapMap" class="pie-wrap"></div>
</template>

<script>
import * as echarts from "echarts";
// require("echarts/theme/macarons"); //引入主题
export default {
    name: "Exp2Anwser",
    data() {
        return {
            chartPie: null,
            heapMapData: [],
            options:{}
        };
    },
    mounted() {
        this.getData();
        this.$nextTick(() => {
            this.drawPieChart();
        });
    },
    methods: {
        async getData() {
            let { data } = await this.$http.get("/one/apriori/picData");
            data = data.data;
            for (let i = 0; i < data.length; i++) {
                for (let j = 0; j < data[i].length; j++) {
                    this.heapMapData.push([j, i, data[i][j] || "-"]);
                }
            }
            console.log(this.heapMapData);
            this.chartPie.setOption(this.option);
        },
        drawPieChart() {
            let mytextStyle = {
                color: "#333",
                fontSize: 18,
            };
            let mylabel = {
                show: true,
                position: "right",
                offset: [30, 40],
                formatter: "{b} : {c} ({d}%)",
                textStyle: mytextStyle,
            };

            this.chartPie = echarts.init(
                document.getElementById("chartHeapMap")
            );
            var hours = ["鸡蛋", "牛奶", "麦片", "面包", "可乐"];
            var days = ["鸡蛋", "牛奶", "麦片", "面包", "可乐"];

            this.option = {
                tooltip: {
                    position: "top",
                },
                grid: {
                    height: "50%",
                    top: "10%",
                },
                xAxis: {
                    type: "category",
                    data: hours,
                    splitArea: {
                        show: true,
                    },
                },
                yAxis: {
                    type: "category",
                    data: days,
                    splitArea: {
                        show: true,
                    },
                },
                visualMap: {
                    min: 0,
                    max: 1,
                    calculable: true,
                    orient: "horizontal",
                    left: "center",
                    bottom: "15%",
                },
                series: [
                    {
                        name: "Punch Card",
                        type: "heatmap",
                        data: this.heapMapData,
                        label: {
                            show: true,
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                    },
                ],
            };
            
        },
    },
};
</script>

<style lang="less"  scoped>
.pie-wrap {
    width: 100%;
    height: 100%;
    color: rgb(221, 23, 23);
}
</style>
